/*
 * @Title: 聊天记录模块
 * @Created by: gsjPC 
 */
<template>
	<view class="tab-chat-content">

		<item-pop-select 
			:showShade="showShade"
			:showPop="showPop"
			:popStyle="popSelectStyle"
			:pickerUserIndex="longTapItemIndex"
			:popButton="popButtonArr"
			@changePop="popChangeHandle"
			@changeshade="shadeChangeHandle"
			@changePickIndex="tapIndexChangehandle"
			@selected="popItemSelectHandle"
		/>

		<uni-swipe-action 
			v-for="(chat,index) in chatList"
			:key="chat.id"
			:options="swiperOption" 
			@change="bindSwiperChange(chat.id)"
			@click="bindSwiperClick">
			<view 
				:data-id="chat.id"
				@longpress="onChatLongPress"
				:class="{'active': longTapItemIndex == index}"
				class="tab-chat-content-item" 
				@tap="goChatView">

				<!-- 未读条数 -->
				<uni-badge v-if="chat.ifNotRead" type="error" class="tab-chat-noread-badage " :text="chat.notReadNum"   />

				<view class="tab-chat-content-item-left">
					<image class="tab-chat-content-item-left-avatar" src="/static/textTx3.jpg" mode=""></image>
					<view class="tab-chat-content-item-left-corner">
					<!-- 	<image src="/static/chat_avatar_corner.png" mode=""></image> -->
					<!-- 	<text>5</text> -->
					</view>
				</view>
			
				<view class="tab-chat-content-item-right">
					<view class="tab-chat-content-item-right-line1">
						<text>{{ chat.name }}</text>
						<text>{{ chat.time }}</text>
					</view>
					<view class="tab-chat-content-item-right-line2">
						所有人下午五点，餐厅门口集合。
					</view>
				</view>
		</view>
		</uni-swipe-action>
	</view>
</template>

<script>
	var utils = require('@/common/util.js');
	import uniSwipeAction from '@/components/uni-swipe-action-origin/uni-swipe-action.vue'
	import uniBadge from '@/components/uni-badge/uni-badge.vue'
	import itemPopSelect from './components/item-pop-select.vue'
	export default{
		data(){
			return{
				chatList: [
					
				],
				curHandleId: '',
				swiperOption: [{
					text: '置顶',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],

				// 长按时指定的下标
				longTapItemIndex: -1,
				popSelectStyle: '',
				showShade: false,
				showPop: false,
				winSize: {},
				popButtonArr: ['标为未读']
			}
		},
		components:{
			uniSwipeAction,
			uniBadge,
			itemPopSelect
		},

		beforeMount() {
			console.log(utils);
			
			console.log('mmmmm')
			this.initData();
			this.$emit('initData');
			console.log(this.chatList);
		},
		methods:{
			initData() {
				let fakeTimeList = ['9:30','13:44','2019-09-20 13:44', '2019-10-10 13:44', '2019-10-15 13:44' ];
				this.chatList = Object.keys(Array.apply(null,{length: 5})).map((v,i) => {
					let ifNotRead = utils.randomNumber(1, 10) > 5;

					return { 
							id: v, 
							isSwipOpen: false, 
							name: 'Dave' +v, 
							time: fakeTimeList[i],
							ifNotRead,
							...(ifNotRead ? { notReadNum: String(utils.randomNumber(1, 99)) } : {} )
					}
				});
			},
			tapIndexChangehandle(val) {
				this.longTapItemIndex = val;
			},
			popChangeHandle(value) {
				this.showPop = value;
			},
			shadeChangeHandle(value) {
				this.showShade = value;
			},
			// 这里的 itemIndex 应该对应 chatList 的 id
			popItemSelectHandle([itemIndex, buttonIndex]) {
				// let selectItemIndex;
				// this.chatList.forEach( (chat, index) => {
				// 	if(chat.id == itemIndex) {
				// 		selectItemIndex = index;
				// 	}
				// });
				console.warn(`selectIndex  ${itemIndex}`);
				switch(this.popButtonArr[buttonIndex]) {
					case '标为未读':
						this.$set(this.chatList[itemIndex], 'ifNotRead', true );
						this.$set(this.chatList[itemIndex], 'notReadNum', '1' );
					break;
					case '标为已读':
						this.$set(this.chatList[itemIndex], 'ifNotRead', false );
						this.$set(this.chatList[itemIndex], 'notReadNum', '0' );
					break;
				}
			},
			/* 获取窗口尺寸 */
			getWindowSize() {
				uni.getSystemInfo({
					success: (res) => {
						this.winSize = {
							"witdh": res.windowWidth,
							"height": res.windowHeight
						}
					}
				})
			},
			// 长按列表项事件
			onChatLongPress(e) {

				let [touches, style, id] = [e.touches[0], "", e.currentTarget.dataset.id];

				let selectItemIndex;
				this.chatList.forEach( (chat, index) => {
					if(chat.id == id) {
						selectItemIndex = index;
					}
				});

				console.warn(`当前长按项为第 ${selectItemIndex} 项`);
				

				// 根据当前聊天的状态决定弹出的文字是 标为已读，还是标为未读
				this.popButtonArr = this.chatList[selectItemIndex].ifNotRead ? ['标为已读'] : ['标为未读'];

				/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
				if (touches.clientY > (this.winSize.height / 2)) {
					style = `bottom:${this.winSize.height-touches.clientY}px;`;
				} else {
					style = `top:${touches.clientY}px;`;
				}
				if (touches.clientX > (this.winSize.witdh / 2)) {
					style += `right:${this.winSize.witdh-touches.clientX}px`;
				} else {
					style += `left:${touches.clientX}px`;
				};

				this.popSelectStyle = style;
				this.longTapItemIndex = Number(selectItemIndex);
				console.warn(this.longTapItemIndex);
				
				this.showShade = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPop = true;
					}, 10)
				});
			},
			goChatView(){
					uni.navigateTo({
						// url:'/pages/lvyouquan/chatView'
					})
			},
			bindSwiperChange(id) {
				this.curHandleId = id;
			},
			bindSwiperClick(e) {
				// console.log(arguments);
				// return;
				let clickText = e.content.text,
					id = this.curHandleId,
					index;
				this.chatList.forEach( (chat, ind) => {
					if(chat.id == id){
						index = ind;
					}
				});
				console.log(`删除的 id是第 ${index} 个`)
				switch(clickText) {
					case '置顶':
						console.log('置顶');
						this.chatList.unshift(this.chatList.splice(index, 1)[0])
						break;
					case '删除':
						this.chatList.splice(index,1);
						console.log('删除');
						break;
				};
				console.log(this.chatList);
			}
		}
	}
</script>

<style>
	.tab-chat-content {
		width:100%;
		overflow: hidden;
		user-select: none;
		touch-callout: none;
	}
	.tab-chat-content-item {
		/* background: green; */
		height: 120upx;
		display: flex;
		align-items: center;
		padding: 15upx 5upx;
		box-sizing: border-box;
		/* margin-bottom: 50upx; */
		position: relative;
	}



	.tab-chat-content-item.active, .tab-chat-content-item:active {
		background-color: #f3f3f3;
	}

	.tab-chat-noread-badage {
		/* background: rgba(251,73,73,1.00); */
		position: absolute;
		height: 40upx;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 0;
		bottom: -40upx;
		right: 10upx;
		margin: auto;

	}
	
	.tab-chat-content-item-left {
		width: 90upx;
		height: 90upx;
		box-shadow: 0 0 5upx 5upx rgba( 0, 0, 0, .1);
		margin-right: 20upx;
		flex-shrink: 0;
		position: relative;
	}
	
	.tab-chat-content-item-left-corner {
		position: absolute;
		right: 0;
		top: 0;
		width: 40upx;
		height: 40upx;
		display: flex;
		justify-content: flex-end;
		align-items: flex-start;
		padding: 0upx 4upx 0 0;
	}
	
	.tab-chat-content-item-left-corner image {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.tab-chat-content-item-left-corner text {
		color: #fff;
		z-index: 50;
		font-size: 20upx;
		line-height: 1.3;
	}
	
	.tab-chat-content-item-left-avatar {
		width: 100%;
		height: 100%;
	}
	
	.tab-chat-content-item-right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.tab-chat-content-item-right-line1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 18upx;
	}
	
	.tab-chat-content-item-right-line1 text:first-child {
		font-size: 28upx;
		color: rgba(39,34,34,1);
	}
	
	.tab-chat-content-item-right-line1 text:last-child {
		color: rgba(178,178,178,1);
		font-size: 20upx;
	}
	
	.tab-chat-content-item-right-line2 {
		width:540upx;
		font-size: 24upx;
		color: rgba(178,178,178,1);
		 white-space: nowrap;
	    text-overflow: ellipsis;
	    overflow: hidden;
	    word-break: break-all;
	}
</style>
